'use strict';

var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
var _interopRequireWildcard = require('@babel/runtime/helpers/interopRequireWildcard');
Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.default = EditableFieldDetail;
var _objectSpread2 = _interopRequireDefault(require('@babel/runtime/helpers/objectSpread2'));
var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));
var _slicedToArray2 = _interopRequireDefault(require('@babel/runtime/helpers/slicedToArray'));
var _objectWithoutProperties2 = _interopRequireDefault(
  require('@babel/runtime/helpers/objectWithoutProperties'),
);
var _react = _interopRequireWildcard(require('react'));
var _classnames2 = _interopRequireDefault(require('classnames'));
var _Form = _interopRequireDefault(require('../Form'));
var _register = require('../SchemaForm/register');
var _CheckOutlined = _interopRequireDefault(require('@ant-design/icons/CheckOutlined'));
var _CloseOutlined = _interopRequireDefault(require('@ant-design/icons/CloseOutlined'));
var _consts = require('../consts');
require('./index.css');
var _excluded = [
  'canChangeMode',
  'onOk',
  'fieldType',
  'Field',
  'name',
  'value',
  'options',
  'format',
];
/**
 * 带编辑功能的表单字段详情
 * @param param0
 * @returns
 */
function EditableFieldDetail(_ref) {
  var _classnames;
  var _ref$canChangeMode = _ref.canChangeMode,
    canChangeMode = _ref$canChangeMode === void 0 ? true : _ref$canChangeMode,
    onOk = _ref.onOk,
    _ref$fieldType = _ref.fieldType,
    fieldType = _ref$fieldType === void 0 ? 'input' : _ref$fieldType,
    FieldComp = _ref.Field,
    name = _ref.name,
    value = _ref.value,
    options = _ref.options,
    format = _ref.format,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _Form$useForm = _Form.default.useForm(),
    _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
    form = _Form$useForm2[0];
  var _useState = (0, _react.useState)('detail'),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    mode = _useState2[0],
    setMode = _useState2[1];
  var isDetail = (0, _react.useMemo)(
    function () {
      return !canChangeMode || mode === 'detail';
    },
    [canChangeMode, mode],
  );
  (0, _react.useEffect)(
    function () {
      form.setFieldsValue(
        (0, _defineProperty2.default)(
          {},
          name,
          format
            ? format(value, {
                isDetail: isDetail,
              })
            : value,
        ),
      );
    },
    [mode, name, value, format, isDetail],
  );
  var toggleMode = (0, _react.useCallback)(
    function () {
      setMode(isDetail ? 'edit' : 'detail');
    },
    [isDetail, form, name, value],
  );
  var Field = (0, _react.useMemo)(
    function () {
      return FieldComp !== null && FieldComp !== void 0
        ? FieldComp
        : (0, _register.getField)(fieldType);
    },
    [FieldComp, fieldType],
  );
  var handleSubmit = (0, _react.useCallback)(
    function () {
      form.validateFields().then(function (vals) {
        onOk === null || onOk === void 0
          ? void 0
          : onOk(vals).then(function (res) {
              if (res === null || res === void 0 ? void 0 : res.success) toggleMode();
            });
      });
    },
    [form, toggleMode],
  );
  var handleCancle = (0, _react.useCallback)(
    function () {
      toggleMode();
      var currentValue = form.getFieldValue(name);
      if (currentValue !== value) {
        form.setFieldsValue(
          (0, _defineProperty2.default)(
            {},
            name,
            format
              ? format(value, {
                  isDetail: isDetail,
                })
              : value,
          ),
        );
      }
    },
    [form, toggleMode, isDetail],
  );
  var className = (0, _classnames2.default)(
    ((_classnames = {}),
    (0, _defineProperty2.default)(
      _classnames,
      ''.concat(_consts.ClsPrefix, '-editable-field-detail'),
      true,
    ),
    (0, _defineProperty2.default)(_classnames, 'editting', !isDetail),
    _classnames),
  );
  return /*#__PURE__*/ _react.default.createElement(
    'div',
    {
      className: className,
    },
    /*#__PURE__*/ _react.default.createElement(
      _Form.default,
      {
        size: 'small',
        form: form,
        detail: isDetail,
      },
      /*#__PURE__*/ _react.default.createElement(
        Field,
        (0, _objectSpread2.default)(
          {
            required: true,
            name: name,
            options: options,
            style: {
              width: 240,
            },
          },
          rest,
        ),
      ),
    ),
    isDetail
      ? /*#__PURE__*/ _react.default.createElement(
          'a',
          {
            onClick: toggleMode,
            className: ''.concat(_consts.ClsPrefix, '-editable-field-detail-icon'),
          },
          '\u7F16\u8F91',
        )
      : /*#__PURE__*/ _react.default.createElement(
          'div',
          null,
          /*#__PURE__*/ _react.default.createElement(_CheckOutlined.default, {
            className: ''.concat(_consts.ClsPrefix, '-editable-field-detail-icon'),
            onClick: handleSubmit,
          }),
          /*#__PURE__*/ _react.default.createElement(_CloseOutlined.default, {
            onClick: handleCancle,
            className: ''.concat(_consts.ClsPrefix, '-editable-field-detail-icon'),
          }),
        ),
  );
}
